<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <script src="https://unpkg.com/vue@next"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
    <title>Element Plus demo</title>
    <style>
        #app {
            width: 100%;
            height: 100%;
            display: flex !important;
            align-items: center;
            justify-content: center;
            background-color: #eef2fc;
        }

        h1 {
            padding: 0;
            margin: 0;
        }

        .formWrapper {
            width: 800px;
            height: 500px;
            background-color: #ffffff;
        }

        .demo-form-inline .el-input {
            --el-input-width: 220px;
        }

        .button {
            display: flex;
            justify-content: center;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="formWrapper">
        <h1>员工离职信息录入</h1>
        <el-form :inline="true" :model="formInline" class="demo-form-inline" :label-width="90">
            <el-form-item label="姓名">
                <el-input v-model="formInline.name" placeholder="请输入姓名" clearable/>
            </el-form-item>
            <el-form-item label="工号">
                <el-input v-model="formInline.userId" placeholder="请输入工号" clearable/>
            </el-form-item>
            <el-form-item label="离职日期">
                <el-date-picker
                        v-model="formInline.departDate"
                        type="date"
                        placeholder="请选择离职日期"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                />
            </el-form-item>
            <el-form-item label="离职原因">
                <el-input type="textarea" v-model="formInline.reason"></el-input>
            </el-form-item>
            <el-form-item label="离职类型">
                <el-select v-model="formInline.type" placeholder="请选择离职类型">
                    <el-option
                            v-for="item in departTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <!--            <el-form-item label="部门">-->
            <!--                <el-cascader-->
            <!--                        ref="cascaderRef"-->
            <!--                        :show-all-levels="false"-->
            <!--                        v-model="formInline.depId"-->
            <!--                        :options="caserData"-->
            <!--                        :placeholder="'请选择部门'"-->
            <!--                        :props="cascaderProps"-->
            <!--                        @change="handleChange"-->
            <!--                />-->

            <!--            </el-form-item>-->
            <!--            <el-form-item label="岗位">-->
            <!--                <el-select v-model="formInline.partId" :disabled="partDisabled" placeholder="请选择岗位">-->
            <!--                    <el-option-->
            <!--                            v-for="item in partOptions"-->
            <!--                            :key="item.value"-->
            <!--                            :label="item.label"-->
            <!--                            :value="item.value"-->
            <!--                    />-->
            <!--                </el-select>-->

            <!--            </el-form-item>-->
            <el-form-item v-show="false">
                <el-input v-model="formInline.snowId"></el-input>
            </el-form-item>
        </el-form>
        <div class="button">
            <el-button type="primary" @click="onSubmit">立即提交</el-button>

        </div>
    </div>
</div>
<script>

	const App = {
		async created() {
			const body = {
				'username': 'yk',
				'password': 'yk',
			}
			this.formInline.snowId = body?.urlSnowId || ''

			const res1 = await this.fetchData('http://liujijiself.f3.ttkt.cc/personnelManagement/employees/login', body)
			this.token = res1.data.token
			const res2 = await this.fetchData('http://liujijiself.f3.ttkt.cc/personnelManagement/departments/getDepartmentRelationshipMap', {})
			this.caserData = res2.data
			console.log(res2.data)
		},
		data() {
			return {
				partDisabled: true,
				partOptions: [],
				token: '',
				caserData: [],
				formInline: {
					name: '',
					userId: '',
					departDate: '',
					reason: '',
				},
				departTypeOptions: [
					{
						'label': '主动辞退',
						'value': '1'
					},
					{
						'label': '辞退',
						'value': '2'
					},
					{
						'label': '退休',
						'value': '3'
					},
					{
						'label': '开除',
						'value': '4'
					},
					{
						'label': '试用期未通过',
						'value': '5'
					}
				],
				marriageOptions: [
					{
						label: '未婚',
						value: '0'
					},
					{
						label: '已婚',
						value: '1'
					}

				],
				cascaderProps: {
					emitPath: false,
					checkStrictly: true,
				}
			}
		},
		methods: {
			async handleChange(v) {
				const node = this.$refs.cascaderRef.getCheckedNodes(false)
				this.formInline.depId = node[0].data.value
				this.partDisabled = false
				let body = {
					departmentId: this.formInline.depId,
					currentPage: 1,
					pageSize: -1
				}
				const res = await this.fetchData('http://liujijiself.f3.ttkt.cc/personnelManagement/departments/obtainJobPositionsByDepartmentId', body)
				this.partOptions = res.data.list.map(item => {
					return {
						label: item.positionName,
						value: item.positionId
					}
				})
			},
			fetchData(url, body) {
				const p = new Promise((resovle, reject) => {
					fetch(url, {
						method: 'POST',
						body: JSON.stringify(body),
						headers: {
							'Content-Type': 'application/json'
						}
					}).then(
						response => response.json()
					).then(data => {
						resovle(data)
					}).catch(err => {
						throw new Error(err)
					})
				})
				return p
			},
			async onSubmit() {
				const res = await this.fetchData('http://liujijiself.f3.ttkt.cc/personnelManagement/employees/brokenLink', this.formInline)
				console.log(res)
				if(res && res.code == 200) {
					alert('填写成功！')
				}
			}
		}
	}
	const app = Vue.createApp(App)
	app.use(ElementPlus)
	app.mount('#app')
</script>
</body>
</html>
